<template>
	<view class="page">
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="确认预约">
				<view slot="center" class="navTitle">
					确认预约 
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="expertList pd30" v-if="info">
					<view class="item">
						<view class="img">
							<image :src="info.image" mode="aspectFill"></image>
						</view>
						<view class="in">
							<view class="tag" :class="info.type==0?'':'s2'">
								<text>{{info.tag}}</text>
								<view class="sd">
									<image src="@/static/images/roundl.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="im">
								<view class="il">
									<view class="it">
										<text class="n">{{info.name}}</text>
										<text>{{info.position}}</text>
									</view>
									<view class="ip">
										{{info.desc}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pd30">
					<view class="whiteForm" v-if="info">
						<view class="line">
							<view class="ll">
								教室地点  
							</view>
							<view class="lr">
								{{info.location}}
							</view>
						</view>
						<view class="line">
							<view class="ll">
								预约日期
							</view>
							<view class="lr">
								{{form.date}}
							</view>
						</view>
						<view class="line">
							<view class="ll">
								具体时间
							</view>
							<view class="lr">
								{{form.time}}
							</view>
						</view>
					</view>
					<view class="whiteForm2">
						<view class="line2">
							<SelectorInput @change="setPerson" :border="true" :list="studentOptions" title="预约学生" placeholder="请选择"></SelectorInput>
						</view>
						<view class="pd40">
							<view class="line">
								<view class="ll">
									所在班级
								</view>
								<view class="lr">
									{{form.person.label2||''}}
								</view>
							</view>
						</view>
					</view>
					<view class="whiteForm">
						<textarea placeholder="咨询问题描述" v-model="form.message" class="textarea"></textarea>
					</view>
					<view class="wtip">
						<view class="tit">
							温馨提示：
						</view>
						<view class="p">
							1、行为问题不仅影响儿童的生长发育、心理健康和社会化过程<br>
							2、还会导致成人期发生社会适应不良、违法犯罪和精神疾病<br>
							3、这些问题产生的基础在儿童期 ,因此早期筛查及干预特别重要。
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex0 fft ">
			<view class="pd30">
				<view class="iaggree">
					<view class="icheck" :class="aggree?'checked':''" @tap="aggree=!aggree">
						<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
					</view>
					<view class="p">
						<text>预约前请仔细阅读</text><text @tap="openCheckPage('/subpage/single/single?id=101')" class="a">《预约须知》</text>
					</view>
				</view>
				<view class="btn" @tap="submit">
					确定预约
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aggree:false,
				showStudent:false,
				studentOptions:[],
				info:{},
				form:{
					message:'',
					person:{}
				}
			}
		},
		methods: {
			openCheckPage(url){
				var that=this;
				if(!url){return};
				uni.navigateTo({
					url:url,
					events:{
						checked:function(){
							that.aggree=true;
						}
					},
					success(res) {
						res.eventChannel.emit('checkModel')
					}
				});
			},
			submit(){
				//提交成功返回预约id
				uni.navigateTo({
					url:'/subpage/appointment/complete?id=101'
				})
			},
			setPerson(e){
				var that=this;
				that.form.person=e;
			},
			getStudentOptions(){
				var that=this;
				var res=[
					{
						value:101,
						label:'刘小聪',
						label2:'五年级一班'
					},
					{
						value:102,
						label:'刘美美',
						label2:'七年级一班'
					},
					{
						value:103,
						label:'刘思充',
						label2:'三年级一班'
					},
					{
						value:104,
						label:'刘华华',
						label2:'一年级一班'
					}
				];
				that.studentOptions=res;
			},
			getInfo(id){
				var that=this;
				var res={
					id:101,
					name:"李浩楠",
					type:0,
					position:'心理专职教师',
					image:'../../static/upload/exp1.png',
					desc:'学校专职心理辅导老师，帮助学生解决问题',
					tag:'校内心理辅导专职教师',
					location:'综合楼三楼301室(心理咨询室)'
				};
				that.info=res;
			},
			getStorageInfo(){
				var that=this;
				uni.getStorage({
					key:"appointFormData",
					success(res) {
						var f=JSON.parse(res.data);
						if(f.expertId){
							that.getInfo(f.expertId)
						};
						var nform={...that.form,...f};
						that.form=nform;
					}
				})
			}
		},
		computed:{
			
		},
		mounted(){
			this.getStorageInfo();
			this.getStudentOptions();
		}
	}
</script>

<style lang="scss" scoped>
	.fft{
		padding: 40rpx 0;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		.iaggree{
			margin-top: 0;
			.a{
				text-decoration: none !important;
			}
		}
		.btn{
			line-height: 90rpx;
			text-align: center;
			background: #fe9c29;
			color: #fff;
			font-size: 28rpx;
			border-radius: 90rpx;
			margin-top: 40rpx;
		}
	}
	.wtip{
		padding: 20rpx 40rpx;
		font-size: 24rpx;
		line-height: 1.7;
		color: #897f7a;
	}
	.expertList{
		margin-bottom: 20rpx;
	}
	.whiteForm2{
		background: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		.pd40{
			padding: 0 40rpx;
		}
		.line{
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			height: 100rpx;
			justify-content: space-between;
			border-bottom: 1rpx solid #f7f5f2;
			font-size: 28rpx;
			&:last-child{
				border: none;
			}
			.ll{
				flex: 1 1 auto;
				overflow: hidden;
				padding-right: 30rpx;
				color: #897f7a;
			}
			.lr{
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				color: #65554d;
				.ico{
					flex: 0 0 auto;
					margin-left: 10rpx;
					image{
						display: block;
						width: 11rpx;
						height: 19rpx;
					}
				}
				
				.cur{
					flex: 0 0 auto;
				}
			}
		}
	}
	.whiteForm{
		padding: 0 40rpx;
		background: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.textarea{
			border: none;
			background: #fff;
			font-size: 28rpx;
			color: #65554d;
			outline: none;
			line-height: 1.5;
			padding: 40rpx 0;
		}
		.line{
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			height: 100rpx;
			justify-content: space-between;
			border-bottom: 1rpx solid #f7f5f2;
			font-size: 28rpx;
			&:last-child{
				border: none;
			}
			.ll{
				flex: 1 1 auto;
				overflow: hidden;
				padding-right: 30rpx;
				color: #897f7a;
			}
			.lr{
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				color: #65554d;
				.ico{
					flex: 0 0 auto;
					margin-left: 10rpx;
					image{
						display: block;
						width: 11rpx;
						height: 19rpx;
					}
				}
				.cur{
					flex: 0 0 auto;
				}
			}
		}
	}
</style>
